<!DOCTYPE html>
<html><head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' charset="utf-8"  />
    <title>( Org Tree Comp )</title>
    <style>
    #ta{
      min-height: 600px;
      height: auto;
      width: 400px;
      }
    </style>
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='../../../ySAPUI5/SAPUI5/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_goldreflection'
        data-sap-ui-libs='sap.ui.table'></script>

<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

<script type="text/javascript">
    var BOI = parent.BOI; //REQUIRED
    var properties = { //REQUIRED
      width: "100px",
      height: "20px",
      varname: ""
    };

  window.onload = function() {
      //sample registeration for an event
      //register listener function for an event
      BOI.Events.addListener(BOI.Events.appchange, function(args) { //args[0] is the app id
         // alert('Event Received by Component, with this data: ' + args[0]);
          alert('Event Received by Component, with this data: ' + args[0]);
          //refresh();
      });
  }

var initialize = function initialize() {//REQUIRED //initialization function ... see below..
    /*---- begin your component custom initialization code ----*/
};
var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
};
var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
};

//Create an instance of the table control
var oTable = new sap.ui.table.TreeTable({
  columns: [
    new sap.ui.table.Column({label: "Key", template: "key"}),
    new sap.ui.table.Column({label: "Title", template: "title"})
  ],
  selectionMode: sap.ui.table.SelectionMode.Single,
  allowColumnReordering: true,
  expandFirstLevel: true,
  toggleOpenState: function(oEvent) {
    var iRowIndex = oEvent.getParameter("rowIndex");
    var oRowContext = oEvent.getParameter("rowContext");
    var bExpanded = oEvent.getParameter("expanded");
  },
  rowSelectionChange: function (oEvent){
      var sPath = oEvent.mParameters.rowContext.sPath;
      var rowInfo =  oModel.getContext(sPath).getObject();

        BOI.Events.raiseEvent(BOI.Events.varchange, [properties.varname, rowInfo.key]);
        //args[0] = varname, args[1] = value/or array object of values
  }
});

//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData('../../../YBW_AC_HRSD_1/org_hierarchy.json');
var oTextView = new sap.ui.commons.TextView({ text :"\n\nloading.." });
oTable.setNoData(oTextView);
oModel.attachRequestCompleted(oTable, function(){
  oTable.setModel(oModel);
  oTable.bindRows("0/");
});

//Bring the table onto the UI
oTable.placeAt("content");
</script>

</head>
<body class='sapUiBody'>
    <div id='content'></div>
</body>
</html>